var gulp = require('gulp');
// 引入一个服务模块
var webserver = require('gulp-webserver');
// url,fs,这两个模块是自带的，不需要安装可直接应用
var url = require('url');
var fs = require('fs');
// sass
var sass = require('gulp-sass');
// gulp-minify-css
var minifyCss = require('gulp-minify-css');
// js
var uglify = require('gulp-uglify');
var webpack = require('gulp-webpack');

// version
var named = require('vinyl-named'); // 重命名模块
var rev = require('gulp-rev'); //版本生成操作
var revCollector = require('gulp-rev-collector') //版本选择
var watch = require('gulp-watch'); //监控
var sequence = require('gulp-watch-sequence');
// var minifyHTML = require('gulp-minify-html');


gulp.task('webserver',function(){
    gulp.src('www').
    pipe(webserver({
        livereload:true, // 热加载，代码的自动刷新   livereload：热加载，代码的自动刷新
        open:true,

        middleware:function(req,res,next){  //中间件
            var urlObj = url.parse(req.url,true),
            method = req.method;

            switch(urlObj.pathname){   //在进行url对象解析的时候，有一个对象叫做pathname
                case '/api/skill.php': //通过pathname进行条件的判断
                res.setHeader('Content-Type','application/json'); //设置：说明返回来是json的格式，那么从哪里返回来呢， 
                fs.readFile('mock/skill.json','utf-8',function(err,data){   //是从下面这行代码返回
                    res.end(data);  //
                })
                return;


                case '/api/project.php':
                res.setHeader('Content-Type','application/json');
                fs.readFile('mock/project.json','utf-8',function(err,data){
                    res.end(data);
                })
                return;


                case '/api/work.php':
                res.setHeader('Content-Type','application/json');
                fs.readFile('mock/work.json','utf-8',function(err,data){
                    res.end(data);
                })
                return;
                

                case '/api/wode.php':
                res.setHeader('Content-Type','application/json');
                fs.readFile('mock/wode.json','utf-8',function(err,data){
                    res.end(data);
                })
                return;

                default:
                ;
            }
            next(); //注意！！next（）是继续执行下面的操作的意思
        }
    }))
})
// www,dist
// 复制首页文件
gulp.task('copy-index',function(){
    return gulp.src('./src/index.html') //将src下面的文件复制到wwww下面
    .pipe(gulp.dest('./www'));
})

// 复制图片文件，静态资源文件
gulp.task('copy-images',function(){
    return gulp.src('./src/images/**')
    .pipe(gulp.dest('./www/images'))
})


// 复制资源文件
gulp.task('copy-resources',function(){
    return gulp.src('./src/resources/**')
    .pipe(gulp.dest('./www/resources'))
})


// sass转化
gulp.task('sass',function(){
    return gulp.src('./src/css/**/*.scss')
    .pipe(sass())                       //sass转化
    .pipe(gulp.dest('./www/css'))       //然后将其复制到对应的文件夹下面
})

// 模块化开发，重点内容 
var jsFiles = ['src/js/index.js'];

gulp.task('packjs',function(){
    return gulp.src(jsFiles)
    .pipe(named())      //named：记录当前的name，然后将名字给复制到www/js文件夹后的文件，没有的话，复制到www/js里的文件名将是一串字符串
    .pipe(webpack())    //打包
    .pipe(uglify())
    .pipe(gulp.dest('./www/js'))
})

// 版本控制，注意，这个版本控制是css、js的代码的版本控制，不是和svn/git一样的代码控制概念
var  cssDistFiles = ['./www/css/index.css'];     //当改变css、js的时候，会自动生成不同编号（版本）的css和js文件，这就是版本控制，
var  jsDistFiles = ['./www/js/index.js'];                                                       //不同于svn和git

// css ver控制
gulp.task('verCss',function(){
    return gulp.src(cssDistFiles)
    .pipe(rev())
    .pipe(gulp.dest('./www/css'))       //注意：这里是将www/css下面的所有文件
    .pipe(rev.manifest())
    .pipe(gulp.dest('./www/ver/css'))
})

// js ver控制
gulp.task('verJs',function(){
    return gulp.src(jsDistFiles)
    .pipe(rev())
    .pipe(gulp.dest('./www/js'))    
    .pipe(rev.manifest())
    .pipe(gulp.dest('./www/ver/js')) 
})

// html版本字符串的替换操作                 //这部分关键！当css和js的内容改变时，即版本发生改变则他们的文件名也会随之生成一个名字，例如原来的
gulp.task('html',function(){              //index.css变成了index123456.css。但是原来的index.html文件里引入css名称没有变还是index.css，使用
    return gulp.src(['./www/ver/**/*.json','./www/*.html']) //这个以后，则html里的css文件名会自动跟随附带版本号的css。这样做能否防止缓存等因素的影响
    .pipe(revCollector({replaceReved:true}))                //js则同样的道理。 比较耗性能
    .pipe(gulp.dest('./www/'))
})

gulp.task('watch',function(){
    gulp.watch('./src/index.html',['copy-index']);//参数1：监控的对象  参数2：执行的任务
    gulp.watch('./src/images/**',['copy-images']);
    gulp.watch('./src/resources/**',['copy-resources']);
    
    // 队列
    var queue = sequence(300);  //对于比较耗性能的，并且是顺序展开操作的，则采用队列的监控方式
    watch('./src/js/**/*.js',{  //对于下面的写法，为直接 参照文档，可不深究。下面的css watch同理
        name:"JS",
        emitOnGlob:false
    },queue.getHandler('packjs','verJs','html'))


     watch('./src/css/**/*.scss',{ //注意：这儿只是监听scss文件，并不能监听css文件。
        name:"CSS",
        emitOnGlob:false
    },queue.getHandler('sass','verCss','html'))


})

gulp.task('default',['webserver','watch']);
//default是默认的，中括号内是要执行的任务。当有默认default时，在终端可直接输入gulp敲回车执行任务